<template>
	<Layout :innerBottom="false">
		<template #title>文章列表</template>
		<view class="inline-flex fill jcc article-list-tabs">
			<u-tabs style="width:calc(100% - 40rpx)" height="56" fontSize="28" bgColor="#F6F6F6" activeColor="#FF710A"
				:activeItemStyle="{fontSize:'32rpx'}" inactiveColor="#6E6E6E" barHeight="3" :list="tabs"
				:is-scroll="true" v-model="current" @change="refresh"></u-tabs>
		</view>
		<view class="flex article-list-body">
			<ScorllRefresher @refresh="refresh" @tolower="tolower">
				<view v-for="item of list" :key="item.articleId" class="inline-flex jcc fill article-item-wrap">
					<view class="inline-flex jcsb article-item" @click.stop="tapToDetail(item.articleId)">
						<view class="inline-flex article-item__image play-icon">
							<image :src="item.imageUrl"></image>
						</view>
						<view class="inline-flex column jcsb article-item__info">
							<view class="inline-flex fill article-item__info__title">
								<view class="ellipsis-line-clamp">{{item.title}}</view>
							</view>
							<view class="inline-flex fill aic article-item__info__footer">
								<view class="inline-flex aic item-data">
									<image src="/static/image/other/time.icon.png"></image>
									<text>{{dateFormat(item.publishedTime)}}</text>
								</view>
								<view class="inline-flex aic item-data">
									<image src="/static/image/other/upvote.icon.png"></image>
									<text>{{item.totalUpvote}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</ScorllRefresher>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getArticleList } from '@/apis/article';
	import { useGetDataPaging } from '@/hooks/paging';
	import { dateFormat } from '@/utils/format';
	const current = ref(0);
	const tabs = ref([
		{ name: '最新' }, // 0或null最新
		{ name: '每日普法' }, // 1
		{ name: '司法判例' }, // 2
		{ name: '咕法研究院' }, // 3
	]);

	const { list, refresh, tolower } = useGetDataPaging({
		api: getArticleList,
		params: () => {
			return { categoryId: current.value }
		}
	});


	function tapToDetail(articleId : string) {
		uni.navigateTo({
			url: `/pages-other/article-detail/article-detail?articleId=${articleId}`
		})
	}

	onLoad(() => {
		refresh();
	});
</script>

<style lang="scss">
	.article-list-tabs {
		height: 116rpx;
		padding: 30rpx 0;
		overflow: hidden;
	}

	.article-list-body {
		width: 750rpx;
		padding-top: 2rpx;
		overflow: hidden;
	}

	.article-item {
		&-wrap {
			&+& {
				margin-top: 24rpx;
			}
		}

		width: 690rpx;
		padding: 22rpx;
		border-radius: 24rpx;
		background: #FFF;

		&__image {
			width: 212rpx;
			height: 152rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 18rpx;
			}

			&.play-icon {
				&:before {
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 10;
					transform: translate(-50%, -50%);
					content: '';
					display: inline-block;
					border-left: 19rpx solid white;
					border-top: 11rpx solid transparent;
					border-bottom: 11rpx solid transparent;
				}
			}
		}

		&__info {
			width: 420rpx;
			height: 152rpx;

			&__title {
				height: 96rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #484848;
				line-height: 48rpx;
			}

			&__footer {


				.item-data {
					width: 50%;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						padding-left: 10rpx;
						height: 48rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #979797;
						line-height: 48rpx;
					}
				}
			}
		}
	}
</style>